<template>

	<view class="con">

		<swiper :style="'height:'+sHeight+'px'" class="content" :current="nowexam" @change='nowexamchange'>
			<swiper-item v-for="(item,index) in newData" :key='index'>
				<scroll-view scroll-y :style="'height:'+sHeight+'px'" style="width: 100%;">
					<view class="c_fir">
						<view class="cf_left">
							<text class="cl_text">{{ item.type | filter1  }}</text>

							<text class="cl_time" v-if="types!=3">剩余时间 :<text
									class="cl_times">{{time | formatTime}}</text></text>
						</view>


						<view class="cf_right" v-if="item.type==95">
							<text class="cr_text1" v-text="index+1"></text>
							<text class="cr_text2" v-text="'/'+newData.length "></text>
						</view>

						<view class="cf_right" v-if="item.type==96">
							<text class="cr_text1" v-text="index+1"></text>
							<text class="cr_text2" v-text="'/'+ newData.length"></text>
						</view>

						<view class="cf_right" v-if="item.type==97">
							<text class="cr_text1" v-text="index+1"></text>
							<text class="cr_text2" v-text="'/'+ newData.length"></text>
						</view>

						<view class="cf_right" v-if="item.type==100">
							<text class="cr_text1" v-text="index+1"></text>
							<text class="cr_text2" v-text="'/'+newData.length"></text>
						</view>



					</view>
					<view class="c_sec">
						<view class="q_title">
							<u-parse :content="item.title" />
						</view>
						<view class="q_choose">
							<!-- 选择题 -->
							<view class='qc_dx' v-if="item.type==95">
								<view class="pc_dxx" v-for="(it,index2) in item.mapList" :key='index2'>
									<text>第{{index2+1}} 小问</text>
									<radio-group @change='answerChange($event,index2)'>
										<label class="pd_item" v-for="(value,key,index3) in it " :key="index3">
											<view class="pdi_left">
												<radio :value="key"
													:checked="item.userAnswer? item.userAnswer[index2].answer==key : value == 'a'"
													style="transform:scale(0.8)" color="#62B6FF" :disabled="types==3">
												</radio>

											</view>
											<view class="pdi_right"> {{key}} : {{value}}</view>
										</label>
									</radio-group>
								</view>
							</view>



							<view class="qc_dx" v-if="item.type==96">
								<view class="aa" v-for="(m,n) in item.mapList" :key="n">
									<input type="text" placeholder="请输入文本"
										:value="   item.userAnswer ? item.userAnswer.find((item)=>item.m == n)!=-1?item.userAnswer.find((item)=>item.m == n).n:'':''"
										@input="onKeyInput($event,n,item.id)" :disabled="types==3" />
								</view>
							</view>


							<view class='qc_dx' v-if="item.type==97">

								<switch  :checked="item.userAnswer != null? item.userAnswer:false"
									@change="changes($event,item.id)" :disabled="types==3"></switch>
							</view>
							<view class="qc_dx" v-if="item.type==100">
								<view v-if="item.descript != null">
									<view class="q_title">
										<u-parse :content="item.descript" />
									</view>
								</view>
								<view class="content" v-if="types!=3">
									<bgyxedit @bgyxchange="getbgyxinfo" :showdone="true"
										:taskinfodtv=" item.userAnswer ? item.userAnswer:title"
										uploadurl="http://127.0.0.1:10085/haha/users/music" filename="img"></bgyxedit>
								</view>
							</view>
						</view>
						<view class="q_btn">
							<view class="qb_next" v-if='index!=0' @click="nowchangeBybtn(-1)">上一题</view>
							<view class="qb_next" v-if='index!=examTotal-1' @click="nowchangeBybtn(1)">下一题</view>
							<view class="qb_next" v-if='index==examTotal-1 && types!=3' @click="gosubmit">交卷</view>
						</view>
					</view>

					<view class="c_thi" v-if="types ==3">
						<view class="ct_fir">
							<view class="ctf_item" v-if="item.type==95">正确答案： <text class="ci_t"
									v-text="item.ansert"></text></view>
							<view class="ctf_item" v-else-if="item.type==96">正确答案： <text class="ci_t"
									v-text="item.ansert"></text></view>
							<view class="ctf_item" v-else-if="item.type==97">正确答案： <text
									class="ci_t">{{ xuanzhe}}</text></view>
							<!--  -->
							<view class="ctf_item">你的答案： <text>{{getMyAnswer}}</text></view>
						</view>
						<view class="ct_sec">
							<view class="cts_left">
								<i class='iconfont iconshuxian' style='font-size: 46upx;color: #62B6FF;'></i>
							</view>
							<view class="cts_right">解析</view>
						</view>
						<view class="ct_thi" v-text="item.example"></view>
					</view>
				</scroll-view>

			</swiper-item>
		</swiper>
		<view class="answer" @click="showDTK">
			<i class='iconfont icondatiqia' style='font-size: 46upx;color: #fff;'></i>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="dtk">
				<view class="d_title">
					<view class="ct_left">答题卡</view>
					<view class="ct_right">
						<uni-icons @click="closeDTK" type="closeempty" size="20" color="#333"></uni-icons>
					</view>
				</view>
				<scroll-view style="width: 100%;height: 71vh;" scroll-y>
					<view class="dtk_more" v-for="(item,index) in nnewData">
						<h5 style="padding-left: 50rpx;">{{ item.type | filter1  }}</h5>
						<view class="d_con">
							<view class="dc_item" v-for="(i,j) in item.data" :key='j' @click="tiaozhuan(i)">
								<view :class="[classObject(i.id)]">{{j+1}}</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 	<u-row class="d_btn">
					<u-col span="6">
						<view class="temp" @click="tempsubmit">暂时保存</view>
					</u-col>
					<u-col span="6">
						<view class="temp" @click="gosubmit">提交试卷</view>
					</u-col>
				</u-row> -->

				<view class="d_btn" v-if="types!=3" @click="tempsubmit">暂时保存</view>
				
					<view class="b_btn" v-if="types!=3" @click="gosubmit">提交试卷</view>

				<view class="d_explain">
					<view class="de_fir">
						<view class="df_item"></view>
						<view class="df_item"></view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uParse from '@/components/pxing-exam/u-parse/u-parse.vue';
	import uniIcons from "@/components/pxing-exam/uni-icons/uni-icons.vue";
	import uniPopup from '@/components/pxing-exam/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/pxing-exam/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/pxing-exam/uni-popup/uni-popup-dialog.vue';
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';

	import {
		mapState
	} from 'vuex'
	export default {
		name: 'pxingExam',
		components: {
			uParse,
			uniIcons,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			bgyxedit

		},

		computed: {
			noData() {
				return "";
			},
			...mapState(['userinfo']),
			imgprop() {
				let imgprop = {
					lozyLoad: true,
					domain: ""
				}
				return imgprop;
			},
			classObject() {
				return function(id) {
					return this.updateDTKS(id)
				}
			},

			xuanzhe() {
				let ids = this.newData[this.nowexam].id
				let datas = this.shiti.find(item => item.id == ids)
				if (datas != null) {
					return datas.isTrue == 1 ? true : false
				}

			},

			getMyAnswer() {
				if (this.types == 3) {
					let ids = this.newData[this.nowexam].id
					let datas = this.Useranswer.find(item => item.id == ids)
					let shiti = []
					if (datas.type == 95) {
						datas.types.forEach(item => {
							shiti.push(item.answer)
						})
						return shiti.toString()
					}
					if (datas.type == 96) {
						datas.tiankonganser.sort((a, b) => {
							return a.m - b.m
						}).forEach(item => {
							shiti.push(item.n)
						})
						return shiti.toString()
					}
					if (datas.type == 97) {
						return datas.ture
					}
					if (datas.type == 100) {
						return datas.jdtanser[0].value
					}

				}

			}



		},

		props: {
			nownum: { //当前题目num
				type: Number,
				default: 0
			},
			examlist: { //考试题目列表
				type: Array,
				default: []
			},
			submitType: {
				type: Number,
				default: 0
			},
			timeOut: {
				type: Number,
				default: 0
			},
			paperId: {
				type: Number,
				default: 22
			},
			Useranswer: {
				type: Array,
				default: []
			},
			types: {
				type: Number,
				default: 0
			}


		},

		watch: {
			nownum: {
				immediate: true,
				handler(n, o) {
					this.nowexam = n;
				}
			},

			submitType: {
				immediate: true,
				handler(n, o) {
					this.sutype = n;
				}
			},
			time(val) {
				if (val == 0) {
					clearInterval(this.otimer); //停止
				}
			}


		},
		data() {
			return {
				sHeight: 0,
				sutype: this.$props.submitType,
				nowexam: this.$props.nownum,
				examList: this.$props.examlist,
				examTotal: 0,
				issubmit: false,
				checked: 1,

				shiti: [],
				newData: [],
				nnewData: [],
				studentName: '',
				title: [{
					"type": "text",
					"value": "请输入值",
					"f": false
				}],

				time: 0,
				otimer: null,
			};
		},
		mounted() {
			this.getData();
			this.getheight();
		},
		filters: {
			filter1(item) {
				if (item == 95) {
					return "选择"
				} else if (item == 96) {
					return "填空"
				} else if (item == 97) {
					return "判断"
				} else if (item == 100) {
					return "简答"
				}

			},

		},
		methods: {
			checkobj(id) {
				return "true"
			},


			tempsubmit() {
				uni.$u.http.post('/app/paper/saveTempQuestion/' + this.paperId, this.Useranswer).then((res) => {
					uni.showToast({
						title: "保存成功，请在规定时间内完成答题",
						icon: 'none'
					})
				})
			},


			changes(e, id) {

				let ids = this.newData[this.nowexam].id
				let type = this.newData[this.nowexam].type
				// //找到 有没有写 这道题目
				let index = this.Useranswer.findIndex(item => {
					return item.id == id
				})
				if (index != -1) {
					this.Useranswer[index].ture = e.detail.value
					this.Useranswer[index].type = type
				} else {
					this.Useranswer.push({
						"id": id,
						"ture": e.detail.value,
						"type": type
					})
				}

			},
			/**
			 * 提交试卷
			 */
			gosubmit() {

				if (!this.issubmit) {
					let tips = ''
					let istrue = true


					// this.Useranswer.forEach((item, index) => {

					// 	}
					// })
					if (this.Useranswer.length == this.examTotal) {
						this.Useranswer.forEach(item => {
							if (item.type == 95) {
								let b = this.newData.find((n) => {
									return n.id == item.id
								})
								let bindex = this.newData.findIndex((n) => {
									return n.id == item.id
								})
								console.log(b);
								console.log(bindex);
								if (item.types.length == b.mapList.length) {} else {
									tips = "第" + (bindex + 1) + "题未写完"
									istrue = false
									uni.showToast({
										title: tips,
										icon: 'none'
									})
								}
							}
							if (item.type == 96) {
								item.tiankonganser.sort((a, b) => {
									return a.m - b.m
								})
								let template = ''
								item.tiankonganser.forEach(item => {
									template += item.n + ','
								})
								item.anser = template
							}

							if (item.type == 95) {
								item.types.sort((a, b) => {
									return a.id - b.id
								})
							}
						})


						let pushdata = {
							"id": '22',
							data: this.Useranswer
						}

						uni.showModal({
							title: '提示',
							content: '确定提交',
							success: (res) => {
								if (res.confirm) {
									this.issubmit = true

									uni.$u.http.post('/app/paper/saveQuestion', pushdata).then((res) => {
										if (res.code == 0) {
											uni.showToast({
												title: '提交成功',
												icon: 'none'
											});

											setTimeout(() => {
												this.hellos(res.data)
											}, 2000);

										}
										console.log(res);
									})



								} else if (res.cancel) {

								}
							}
						});

						console.log(this.Useranswer);

					} else {
						uni.showToast({
							title: "还有题目未完成",
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: "试卷已提交",
						icon: 'none'
					})
				}
			},
			hellos(id) {
				this.$emit('getEveryAnswer', id)
			},


			//  把题目 变成 已达题
			updateDTKS(id) {

				if (this.Useranswer.length > 0) {
					let index = this.Useranswer.findIndex(item => {
						return item.id == id
					})
					if (index != -1) {
						return "dci_num"
					} else {
						return "dci_num2"
					}

				} else {
					return "dci_num2"
				}
			},
			getbgyxinfo: function(e) {
				// //获取富文本内容，默认模式拼接的html
				let jdtanser = e.data
				let id = this.newData[this.nowexam].id
				let type = this.newData[this.nowexam].type

				let index = this.Useranswer.findIndex(item => {
					return item.id == id
				})

				if (index != -1) {
					this.Useranswer.splice(index, 1, {
						id: id,
						jdtanser,
						type
					})
				} else {
					this.Useranswer.push({
						id: id,
						jdtanser,
						type
					})
				}

			},

			nowexamchange(e) {
				var tempindex = e.detail.current;
				this.nowexam = tempindex;

			},
			onKeyInput(n, m) {
				let id = this.newData[this.nowexam].id
				let type = this.newData[this.nowexam].type
				// //找到 有没有写 这道题目
				let index = this.Useranswer.findIndex(item => {
					return item.id == id
				})
				let newdata = [{
					m: m,
					n: n.detail.value,
				}]
				if (index != -1) {
					let k = this.Useranswer[index].tiankonganser.findIndex(users => {
						return users.m == m
					})
					if (k != -1) {
						this.Useranswer[index].tiankonganser.splice(k, 1, {
							m: m,
							n: n.detail.value
						})
					} else {
						this.Useranswer[index].tiankonganser.push({
							m: m,
							n: n.detail.value
						})
					}
				} else {
					this.Useranswer.push({
						id: id,
						tiankonganser: newdata,
						type: type

					})
				}



			},
			nowchangeBybtn(num) {
				this.examchangeByDTK = true;
				this.nowexam = this.nowexam + num;
			},
			//答题卡 点击 跳转 题目
			tiaozhuan(item) {
				// console.log(item);

				let index = this.newData.findIndex(i => {
					return i.id == item.id
				})
				console.log(index);
				this.nownum = index
				this.$refs.popup.close();
			},

			closeDTK() {
				this.$refs.popup.close();
			},
			showDTK() {
				this.$refs.popup.open();
			},
			answerChange(e, m) {
				let anser = e.detail.value
				let id = this.newData[this.nowexam].id
				let type = this.newData[this.nowexam].type
				let index = this.Useranswer.findIndex(item => {
					return item.id == id
				})


				if (index != -1) {
					let index2 = this.Useranswer[index].types.findIndex(item => {
						return item.id == m
					})
					if (index2 != -1) {
						this.Useranswer[index].types.splice(index2, 1, {
							id: m,
							answer: anser
						})
					} else {
						this.Useranswer[index].types.push({
							id: m,
							answer: anser
						})
					}
				} else {
					this.Useranswer.push({
						"id": id,
						"types": [{
							"id": m,
							"answer": anser
						}],
						type: type
					}, )
				}
			},

			getData() {

				this.time = this.timeOut

				if (this.time != 0) {
					this.otimer = setInterval(() => {
						//逻辑
						this.time = this.time - 1
					}, 1000);
				}





				this.studentName = "studentId:" + this.userinfo.id
				this.examTotal = this.examList.length;
				this.newData = this.examList
				// let zhanshiTip = uni.getStorageSync(this.studentName) || []

				this.newData.forEach((i, j) => {
					this.Useranswer.forEach((m, n) => {
						if (i.id == m.id) {
							if (m.type == 95) {
								i.userAnswer = m.types
							}
							if (m.type == 96) {
								i.userAnswer = m.tiankonganser
							}
							if (m.type == 97) {
								i.userAnswer = m.ture
							}
							if (m.type == 100) {
								i.userAnswer = m.jdtanser
							}
						}
					})
				})


				// if (zhanshiTip.length > 0) {
				// 	this.Useranswer = JSON.parse(zhanshiTip)


				// }
				let data = this.classify(this.newData)
				this.nnewData = data

				this.newData.forEach(item => {
					// if (item.type == 95) {
					// 	console.log(item);

					// }
					if (item.type == 96) {
						item.mapList = []
						var count = this.getCharCount(item.title, '__');
						for (var i = 0; i < count; i++) {
							item.mapList.push('')
						}
						console.log(count);
					}
					if (item.type == 97) {
						this.shiti.push({
							id: item.id,
							isTrue: item.flag
						})
					}

				})
			},

			getCharCount(str, char) {
				var regex = new RegExp(char, 'g'); // 使用g表示整个字符串都要匹配
				var result = str.match(regex); //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
				var count = !result ? 0 : result.length;
				return count;
			},
			classify(arr) {
				let map = {};
				let myArr = [];
				let num = 0
				for (let i = 0; i < arr.length; i++) {
					if (!map[arr[i].type]) {
						num++
						myArr.push({
							type: arr[i].type,
							data: [arr[i]]
						});
						map[arr[i].type] = arr[i]

					} else {

						for (let j = 0; j < myArr.length; j++) {
							if (arr[i].type === myArr[j].type) {
								myArr[j].data.push(arr[i]);
								break
							}
						}
					}
				}
				return myArr
			},
			async getheight() {
				var sh = 0;
				var that = this;
				var windowInfo = uni.getSystemInfo({
					success(res) {
						that.sHeight = res.windowHeight;
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/components/pxing-exam/iconfont.css";

	.con {
		width: 100%;

		.content {
			width: 100%;

			.c_fir {
				width: 94%;
				padding: 0 3%;
				height: 80upx;
				background-color: #f6f6f6;
				display: flex;

				.cf_left {
					width: 70%;
					height: 80upx;
					line-height: 80upx;

					.cl_text {
						font-size: 28upx;
						color: #999;
					}

					.cl_time {
						font-size: 28upx;
						color: #999;
						margin-left: 100rpx;
					}

					.cl_times {
						color: red;
					}
				}

				.cf_right {
					width: 30%;
					height: 80upx;
					line-height: 80upx;
					text-align: right;

					.cr_text1 {
						font-size: 28upx;
						color: #62B6FF;
					}

					.cr_text2 {
						font-size: 28upx;
						color: #999;
					}
				}
			}

			.c_sec {
				width: 94%;
				margin: 0 auto;

				.q_title {
					width: 100%;
					margin-top: 20upx;
					font-size: 28upx;
					color: #333;
				}

				.q_choose {
					width: 100%;

					.qc_dx {
						width: 100%;
						margin-top: 24upx;
						padding-bottom: 24upx;

						.pd_item {
							width: 100%;
							display: flex;

							.pdi_left {
								width: 10%;
								padding: 12upx 0;
							}

							.pdi_right {
								width: 90%;
								padding: 16upx 0;
								font-size: 28upx;
							}
						}
					}
				}

				.q_btn {
					width: 98%;
					display: flex;
					justify-content: flex-end;
					height: 60upx;
					margin-bottom: 24upx;

					.qb_next {
						opacity: 0.8;
						margin-right: 22upx;
						width: 130upx;
						height: 60upx;
						line-height: 60upx;
						background-color: #62B6FF;
						color: #fff;
						text-align: center;
						font-size: 26upx;
						border-radius: 120upx;
					}
				}
			}

			.c_thi {
				width: 100%;
				padding: 24upx 0;

				.ct_fir {
					width: 94%;
					padding: 0 3%;
					display: flex;
					height: 80upx;

					.ctf_item {
						width: fit-content;
						margin-right: 3%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26upx;

						.ci_t {
							color: #62B6FF;
						}

						.ci_c {
							color: #2c9678;
						}

						.ci_w {
							color: #ee2746;
						}
					}
				}

				.ct_sec {
					width: 94%;
					margin: 20upx auto 0;
					height: 80upx;
					display: flex;
					border-bottom: 1px solid #f6f6f6;

					.cts_left {
						width: 6%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cl_img {
							width: 50upx;
							height: 32upx;
						}
					}

					.cts_right {
						width: 80%;
						height: 80upx;
						font-size: 28upx;
						color: #333;
						font-weight: 700;
						line-height: 80upx;
					}
				}

				.ct_thi {
					width: 94%;
					margin: 0 3%;
					font-size: 26upx;
					color: #666;
					margin-top: 20upx;
					padding-bottom: 20upx;
				}
			}
		}

		.answer {
			border-radius: 50%;
			width: 80upx;
			height: 80upx;
			background-color: #62B6FF;
			opacity: 0.8;
			position: fixed;
			bottom: 80upx;
			right: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.a_img {
				width: 48upx;
				height: 48upx;
			}
		}

		.dtk {
			width: 86vw;
			height: 80vh;
			background-color: #fff;
			border-radius: 8upx;

			.d_title {
				width: 94%;
				padding: 0 3%;
				height: 7vh;
				display: flex;
				border-bottom: 1px solid #f6f6f6;

				.ct_left {
					width: 80%;
					height: 7vh;
					font-size: 30upx;
					color: #333;
					letter-spacing: 4upx;
					font-weight: 700;
					line-height: 7vh;
				}

				.ct_right {
					width: 20%;
					height: 7vh;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.d_con {
				width: 94%;
				padding-top: 12upx;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;

				.dc_item {
					width: 20%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100upx;

					.dci_num {
						width: 60upx;
						height: 60upx;
						background-color: #62B6FF;
						border-radius: 50%;
						text-align: center;
						line-height: 60upx;
						color: #fff;
						font-size: 24upx;
					}

					.dci_num2 {
						width: 60upx;
						height: 60upx;
						background-color: #eee;
						border-radius: 50%;
						text-align: center;
						line-height: 60upx;
						color: #999;
						font-size: 24upx;
					}
				}
			}

			.d_btn {

				width: 100%;
				height: 4vh;
				background-color: pink;
				position: absolute;
				text-align: center;
				line-height: 4vh;
				color: #fff;
				font-size: 28upx;
				letter-spacing: 4upx;
				bottom: 60rpx;
				border-radius: 0 0 8upx 8upx;
			}
			.b_btn
			{
				width: 100%;
				height: 4vh;
				background-color: #62B6FF;
				position: absolute;
				text-align: center;
				line-height: 4vh;
				color: #fff;
				font-size: 28upx;
				letter-spacing: 4upx;
				bottom: 0;
				border-radius: 0 0 8upx 8upx;
			}

		}
	}
</style>
